<template>
    <div>
        <div class="vtits-cl">
        <h3>{{list.title}}</h3>
        <p>
             <span>{{list.add_time|dateFormat}}</span>
              <span>点击：{{list.click}}</span>
        </p>
        <!-- 图片预览 -->
         <vue-preview :slides="imgs">
           <!-- <img v-for="item in imgs" :key="item.id" :src="item.src"  alt=""> -->
         </vue-preview>
       
           <!-- <img  v-for="item in imgs" :slides="imgs" :key="item.id" :src="item.src" height="100" alt=""> -->
       <div class="content" v-html="list.content"></div>
        </div>
        <!-- 评论子组件 -->
        <Comment class="Com" :id="id"></Comment>
    </div>
</template>
<script>
import Comment from '../sub/Comment.vue'
export default {
    data () {
        return {
            id:this.$route.params.id,
            list:{},
            imgs:[]
        }
    },
    created(){
        this.getNes();
        this.getImg()
    },
    methods:{
        getNes(){
            this.$axios.get('api/getimageInfo/'+this.id).then(res=>{
                console.log(res)
                if(res.data.status===0){
                    this.list=res.data.message[0]
                }
            })
        },
        getImg(){
            this.$axios.get('api/getthumimages/'+this.id).then(res=>{
                console.log(res)
                if(res.data.status===0){
                    res.data.message.forEach((item,i) => {
                        item.w=600;
                        item.h=400;
                        item.msrc=res.data.message[i].src
                    });
                    this.imgs=res.data.message;
                    console.log(res)
                }
            })
        }
    },
    components:{
        Comment
    }
}
</script>
<style lang="scss" scoped>
.vtits-cl{
   
    h3{
        font-size: 14px;
        color: #555;
        text-align: center;
    }
    p{
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 12px;
        color: #666;
        padding: 0px 10px;
    }
}
.Com{
    margin-bottom: 50px;
}

</style>
